<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>Datastore Dashboard</title>
		
		<!-- Styles -->
		<link rel="stylesheet" href="jquery-ui-1/css/smoothness/jquery-ui-1.8.custom.css" type="text/css" media="screen" title="no title" charset="utf-8" />
		<link rel="stylesheet" href="ui.selectmenu.css" type="text/css" media="screen" title="no title" charset="utf-8" />
		<link rel="stylesheet" href="fg.menu.css" type="text/css" media="screen" title="no title" charset="utf-8" />

		<link rel="stylesheet" href="datastore.css" type="text/css" media="screen" charset="utf-8" />
		
		<!-- Scripts -->
		<script src="jquery-ui-1/js/jquery-1.4.2.min.js" type="text/javascript" language="javascript" charset="utf-8"></script>
		<script src="jquery-ui-1/js/jquery-ui-1.8.custom.min.js" type="text/javascript" language="javascript" charset="utf-8"></script>
		<script src="jquery.rightClick.js" type="text/javascript" language="javascript" charset="utf-8"></script>
		<script src="ui.selectmenu.js" type="text/javascript" language="javascript" charset="utf-8"></script>
		<script src="fg.menu.js" type="text/javascript" language="javascript" charset="utf-8"></script>
		
		<script type="text/javascript" src="../jquery.datastore.js"></script> 	 
	    <script type="text/javascript" src="../jquery.datastore.templates.js"></script>
		
		<!-- Templates -->
		<object type="text/html" name="datatree-item">
			<div title="{{ @path }}" class="data-item {{ @kind }}">
				<span class="icon"> </span>
				<a class="title" href="javascript:void(0)" title="{{ @path }}">{{ @name }}</a>
				<ul use-if="@kind != 'value'">
					<li for-each="*">
						<div use-template="datatree-item"> </div>
					</li>
				</ul>
			</div>
		</object>
		
		<object type="text/html" name="node-details">
			<div>
				<h3>{{ @path }}</h3>
				
				<a href="#menu" class="context-menu">Context Menu</a> 
				
				<h4 use-if="@kind = 'value'">Value</h4>
				<input use-if="@kind = 'value'" use-template="value-editor" />
				
				<h4>Metadata</h4>
				<table style="font-size:9pt" cellspacing="3">
					<tr for-each='@*'>
						<th>{{ $name }}</th>
						<td>{{ $value }}</td>
					</tr>
				</table>
			</div>
		</object>
		
		<object type="text/html" name="value-editor">
			<div>
				<textarea style="width:100%; height:100px">{{ $value }}</textarea>
			</div>
			<script type="update">
				$("textarea", this).val(value);
			</script>
			<script type="init">
				$("textarea", this).change(function() {
					var value = $(this).val();
					$(this).fieldeditor('commit', value);
				});
			</script>
		</object>
		
		<!-- Menus -->
		<object type="text/html">
			<div id="data-list-menu">
				<ul>
					<li>
						<a href="#">Add</a>
						<ul>
							<li><a href="#">Value</a></li>
							<li><a href="#">Array</a></li>
							<li><a href="#">Object</a></li>
						</ul>
					</li>
					<li>
						<a href="#">Delete</a>
					</li>
				</ul>
			</div>
		</object>
		
		<!-- Dialogs -->
		<object type="text/html">
			<div id="modal-error">
				<p id="modal-error-message" class="ui-state-error ui-corner-all" style="padding:0.7em"></p>
			</div>
		</object>
		
		<!-- Callbacks -->
		<script type="text/javascript" language="javascript" charset="utf-8">
			showItemGroup = function(query) {
				$("#data-list").children().remove();
				$.ds(query).render("datatree-item", "#data-list");
				
				$("#data-list .data-item > .title").click( function(e) {
					//Show Item Details
					var path = $(this).attr("title");
					$('#data-editor').children().remove();
					$.ds(path).render("node-details", "#data-editor");
					
					$("#data-editor .context-menu").menu({
						content: $("#data-list-menu").html(),
						backLink:true,
						crumbDefaultText: ' '
					});
				}).dblclick( function(e) {
					//Toggle Item Children
					$(this).parent().children("ul").slideToggle('fast');
				}).rightClick( function(e) {
					//Show Context Menu
					console.info("Show Context Menu at x:" + e.pageX + " y:" + e.pageY);
				});
			};
		</script>
		
		<!-- Init -->
		<script type="text/javascript">
			/*******************
			/*    Datastore    *
			/*******************/
			$(function() {
				$.ds.loadModule("storage");
				$.ds.loadModule("query");
				$.ds.loadModule("templates");
				
				$.ds.templates.loadTemplates();
				
				$.ds.storage.transaction(function() {
					$.ds.storage.setValue("foo", {
						a : "a",
						b : {
							c : "c",
							d : "d",
							e : [ 0, 2, 3, {
								f : "hello",
								g : "world"
							}]
						}
					});
					$.ds.storage.setValue("bar", "bar");
				});
			});
			
			/*******************
			/*    Interface    *
			/*******************/
			$(function() {
				$("#sidebar select").selectmenu({ style:'dropdown' }).change(function() {
					showItemGroup( $(this).val() );
				});
				$("#modal-error").dialog({
					autoOpen:false, 
					modal:true, 
					buttons: { 
						"Ok": function() { $(this).dialog("close"); } 
					}
				});
			});
			
			/*******************
			/*    Bootstrap    *
			/*******************/
			$(function() {
				showItemGroup("*");
			});
		</script>
	</head>
	<body>
		<div id="header">
			<h1>Datastore Dashboard</h1>
		</div>
		
		<div id="sidebar">
			<select>
				<option value="*">Data</option>
				<option value="@templates.*">Templates</option>
			</select>
			<div id="data-list" class="ui-widget ui-widget-content ui-corner-all"> </div>
		</div>
		<div id="detail" class="ui-widget">
			<div id="data-editor" class="ui-widget-content ui-corner-all">
			</div>
		</div>
		<div id="footer">
			Footer
		</div>
	</body>
</html>